<template>
  <el-dialog
    custom-class="cd-img"
    :visible.sync="centerDialogVisible"
    :close-on-click-modal="false"
    width="90vw"
    @close="close"
    center>
    <div v-if="imgList[currentIndex] != undefined" class="img"
         :style="'background: url(' + imgList[currentIndex] + ') center center / contain no-repeat'">
      <el-button type="text" @click="previous" style="left: -3%;" v-if="currentIndex>0">3333
      </el-button>
      <el-button type="text" @click="next" style="right: -3%;" v-if="currentIndex< this.imgList.length - 1">
      </el-button>
      <video width="100%" height="100%" controls
             ref="video"
             autoplay loop
             v-if="imgList[currentIndex].type =='video'">
        <source :src="imgList[currentIndex].url" type="video/mp4">
        您的浏览器不支持 HTML5 video 标签。
      </video>
    </div>
  </el-dialog>
</template>


<script>
  import { Dialog, Button } from 'element-ui'

  export default {
    name: 'CdImg',
    components: {
      [Button.name]: Button,
      [Dialog.name]: Dialog
    },
    componentName: 'CdImg',
    props: {
      data: Object,
      color: {
        type: String,
        default: '#ff5a52'
      },
      imgList: Array,
      index: Number
    },
    data() {
      return {
        centerDialogVisible: false,
        currentIndex: 0
      }
    },
    watch: {
      index: function(newVal, oldVal) {
        this.currentIndex = newVal !== undefined ? newVal : 0
      }
    },
    methods: {
      open() {
        console.info(this.imgList[this.currentIndex])
        this.centerDialogVisible = true
        if (this.$refs.video !== undefined) {
          this.$refs.video.play()
        }
      },
      next() {
        this.currentIndex = this.currentIndex >= this.imgList.length - 1 ? this.currentIndex : this.currentIndex + 1
      },
      previous() {
        this.currentIndex = this.currentIndex <= 0 ? 0 : this.currentIndex - 1
      },
      close() {
        if (this.$refs.video !== undefined) {
          this.$refs.video.pause()
        }
      }
    },
    mounted() {
    }
  }
</script>


<style lang="scss" rel="stylesheet/scss" slot-scoped>
  .el-dialog__wrapper {
    overflow: hidden !important;
  }

  .cd-img.el-dialog {
    margin-top: 0 !important;
    padding: 0;
    background: transparent;
    box-shadow: 0 0 0 transparent;
    .el-dialog__header {
      position: fixed;
      top: 5%;
      right: 2%;
      z-index: 9999;
      .el-dialog__headerbtn {

        .el-dialog__close {
          background-color: #7e848f;
          border-radius: 50%;
          color: #fff;
          padding: .25rem;
          font-size: 1.25rem;
        }

      }
    }
    .el-dialog__body {
      padding: 0;
      vertical-align: bottom;
    }

      .img {
        width: 100%;
        height: 100vh;
        position: relative;

        .el-button {
          position: absolute;
          top: 50%;
        }

      }
  }

</style>
